<template>
  <div class="operation-box" :style="boxstyle">
    <!-- 1.三角形 -->
    <div class="operation-triangle" :style="trianglestyle" z-index="1"></div>
    <!-- 2.真实box -->
    <div class="operation-rectangle" :style="rectanglestyle">
      <ul>
        <li @click.stop="toReport">添加好友</li>
        <li @click.stop="shield">好友列表</li>
      </ul>
    </div>
    <van-overlay :show="show" z-index="10" @click.stop="closeBox" />
  </div>
</template>

<script>
export default {
  name: "friend-operate",
  data() {
    return {
      show: true,
      boxstyle: {
        top: "46px",
      },
      trianglestyle: {
        top: "-10px",
        "border-top": "10px solid #00000000",
        "border-bottom": "10px solid #565656",
      },
      rectanglestyle: {
        top: "10px",
      },
    };
  },
  methods: {
    toReport() {
      this.$router.push({
        path: "/report",
        query: { topic: this.$parent.topic.id },
      });
    },
    // 屏蔽
    shield() {},
    closeBox() {
      this.show = false;
      this.$parent.operate_show = false;
    },
  },
  mounted() {
  },
};
</script>

<style scoped>
.operation-rectangle{
  background: #565656;
}
</style>